<template>
	<view class="project-warp">
		<!-- 搜索框 -->
		<Topsearch class="topSearch" :showFocus="showFocus" :showCate='false' :searchKeyWord="searchKeyWord" :currentCateIndex="cateIndex"
		 :placeHoder="placeText" @currentCateClick='changeCateIndex' @searchEvent="searchDetail" @searchClear='searchDetail' />
		<!-- tab切换 -->
		<ss-navbar class="order-navbar" :navArr="navArr" :tabCurrentIndex="currentIndex" @navbarTap="navbarTapHandler"></ss-navbar>
		<!-- 订单内容 -->
		<view class="sysNodata" v-if="total===0">
			<image src="../../static/nomorepro.png" mode=""></image>
			<view class="sysNodataTitle">
				暂无相关数据
			</view>
		</view>
		<view class="order-warp" v-if="total!=0&&total!=-1">
			<view v-for="(item,key) in orderData" class="order-item" :key="key">
				<view class="order-time">
					<view class="order-data">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/order-icon1.png"></image>
						{{item.createDate}}
					</view>
					<view class="order-sign" v-if="parseInt(item.state) === 0">待付款</view>
					<view class="order-sign" v-if="parseInt(item.state) === 1">待使用</view>
					<view class="order-sign" v-if="parseInt(item.state) === 2">已完成</view>
					<view class="order-sign" v-if="parseInt(item.state) === 3">已取消</view>
					<view class="order-sign" v-if="parseInt(item.state) === 4">已关闭</view>
				</view>
				<view class="order-info" @click="toDetails(item)">
					<ivew class="order-image">
						<image class="order-active" v-if="item.type === 'activities'||item.type === 'service'" :src="item.imgAddrs"></image>
						<view v-else class="order-person">
							<image :src="item.expertImgAddrs"></image>
						</view>
					</ivew>

					<view class="order-date" v-if="item.type === 'activities'||item.type === 'service'">
						<view class="order-title">{{item.title}}</view>
						<view>
							<view class="order-type">
								类型：{{item.typeLable}}
							</view>
							<view class="order-num">
								数量：{{item.mallNum}}
								<view class="order-num-r">
									¥{{item.actualPrice.toFixed(2)}}
								</view>
							</view>
							<view class="order-num-price-right">
								实付金额
								<span class="order-num-num">¥{{item.totalPrice.toFixed(2)}}</span>
							</view>
						</view>
					</view>
					<view class="order-date order-date-person" v-else>
						<view class="order-title">{{item.title}}</view>
						<view class="order-type">
							类型：{{item.typeLable}}
						</view>
						<view class="order-num-price">
							共{{item.mallNum}}件商品，实付金额
							<span class="order-num-num">¥{{item.totalPrice.toFixed(2)}}</span>
						</view>

					</view>
				</view>
				<view class="order-pay">
					<view class="order-pay-button1" @click="topay(item,key)" v-if="parseInt(item.state)=== 0">立即支付</view>
					<view class="order-pay-button2" @click="applyService" v-if="parseInt(item.state) === 1">申请售后</view>
					<view class="order-pay-button1" @click="toBuy(item)" v-if="parseInt(item.state) === 2&&item.type!='service'">{{item.type === 'activities'?'再次报名':'再次购买'}}</view>
					<view class="order-pay-button1" @click="toBuy(item)" v-if="parseInt(item.state) === 3&&item.type!='service'">{{item.type === 'activities'?'再次报名':'再次购买'}}</view>
					<view class="order-pay-button1" @click="toBuy(item)" v-if="parseInt(item.state) === 4&&item.type!='service'">{{item.type === 'activities'?'再次报名':'再次购买'}}</view>
					<view class="order-pay-button1" style="margin-left: 10upx;" @click="toaAssess(item)" v-if="parseInt(item.state) === 2&&parseInt(item.appraiseState) === 0">评价</view>
				</view>
			</view>
			<view class="sysBottomShow" v-if="isLastPage&&orderData.length>2">
				我是有底线的
			</view>
		</view>


	</view>

</template>

<script>
	import Topsearch from '@/components/top-search-tab.vue'
	import ssNavbar from '@/components/ss-navbar/ss-navbar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				searchKeyWord: '',
				cateIndex: 0,
				showFocus:false,
				placeText: '搜索我的订单',
				currentIndex: 0,
				navArr: [{
						title: '全部',
						url: '全部'
					}, {
						title: '待付款',
						url: '待付款'
					},
					{
						title: '待使用',
						url: '待使用'
					}, {
						title: '待评价',
						url: '待评价'
					}
				],
				params: {
					pageSize: 10,
					pageNum: 1,
					state: '',
					searchKey: ''
				},
				total: -1,
				orderData: [],
				isEmptyData: true,
				isLastPage: false
			};
		},
		components: {
			Topsearch,
			ssNavbar
		},
		onLoad() {
			this.onloadOrder();
		},
		onShow() {
			if (this.isCancel) {
				this.clearData()
				this.onloadOrder();
			}
		},
		onHide() {
			this.resetIsCancel()
		},
		watch: {
			total(val) {
				parseFloat(val) === 0 ? this.isEmptyData = true : this.isEmptyData = false;
			}
		},
		computed: {
			...mapState('userStore', ['userInfo', 'isCancel'])
		},
		methods: {
			...mapMutations('userStore', ['resetIsCancel']),
			//清空数据
			clearData() {
				this.total = 1;
				this.orderData = [];
			},
			//跳转评价页
			toaAssess(item) {
				console.log(item)
				// uni.navigateTo({
				// 	url: '/pageA/order-assess/order-assess?id=' + item.id + '&type=' + item.typeLable
				// })
				uni.navigateTo({
					url:`/pagesA/order-assess/order-assess?id=${item.id}&type=${item.typeLable}`
				})
			},
			//申请售后
			applyService() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
			pay(orderInfo,index,item) {
				const {
					nonceStr,
					sign,
					signType,
					timeStamp
				} = orderInfo;
				let that = this;
				
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					package: orderInfo.package,
					signType: signType,
					paySign: sign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
						})
						that.$set(that.orderData[index],'state',1)
						if(item.type==='expertImgTxt'){
							uni.navigateTo({
								url: `/pagesA/chat-contactlist/fee-chat?userId=${item.mainDetail.link_user_id}&expertId=${item.mainDetail.expert_id}&type=0&finished='true'`
							})
						}else {
							uni.navigateTo({
								url:"/pagesA/order/act-result"
							})
						}
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			//立即支付
			topay(item, key) {
				console.log('topay ', item);
				let _self = this;
				const index = key;
				if (parseInt(item.payType) === 21) {
					let userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.userId) {
						uni.navigateTo({
							url: '/pagesA/login/login'
						});
						return false;
					}
					let params = {
						orderCode: item.orderCode
					}
					this.$request.get({
						url: 'payOrder/goPay',
						data: params
					}).then(res => {
						console.log('支付', res)
						_self.pay(res,index,item)
					})
				} else {
					// pc端未支付订单 需要先更新订单
					const openId = uni.getStorageSync('openid');
					this.$request.post({
						url: 'payOrder/updatePayType',
						data: {
							id: item.id,
							payType: '21',
							remarks: 2,
							openId
						},
					}).then(res => {
						console.log('支付信息',res)
						_self.pay(res, index,item);
					});
				}
			},
			//购买页面
			toAcOrder() {
				let userInfo = uni.getStorageSync('userInfo');

				if (!userInfo || !userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				let obj = {
					imgAddrs: '',
					activitiesTopic: '',
					startTime: '',
					endTime: '',
					provinceName: '',
					cityName: '',
					regNumber: '',
					isFee: '',
					regFee: '',
					id: '',
					detailInfo: {}
				};
				for (let key in obj) {
					obj[key] = this.detailInfo[key]
				}
				let json = JSON.stringify(obj);
				uni.navigateTo({
					url: `/pagesA/act-order/act-order?param=${json}`
				})
			},
			getDetail(id) {
				this.$request.get({
					url: 'innovationActivities/showById',
					data: {
						id: id
					},
				}).then(res => {
					this.detailInfo = res;
					this.toAcOrder();
				});
			},
			//重新购买
			toBuy(item) {
				
				if (item.type === 'activities') {
					uni.navigateTo({
						url: '/pages/activity-detail/activity-detail?scene=' + item.mainDetail.id
					});
				} else if (item.type === 'expertImgTxt') {
                        uni.navigateTo({
                        	url: '/pages/expert-detail/expert-detail?scene=' + item.mainDetail.expert_id
                        });
				} else if (item.type === 'expertPhone') {
					uni.navigateTo({
						url: '/pages/expert-detail/expert-detail?scene=' + item.mainDetail.expert_id
					});
				}
			},
			//跳转详情
			toDetails(item) {
				if (item.type === 'activities') {
					uni.navigateTo({
						url: '/pages/order-detail-active/order-detail-active?id=' + item.id
					})
				} else if (item.type === 'expertImgTxt') {
					uni.navigateTo({
						url: '/pages/order-detail-text/order-detail-text?id=' + item.id
					})
				} else if (item.type === 'expertPhone') {
					uni.navigateTo({
						url: '/pages/order-detail-tel/order-detail-tel?id=' + item.id
					})
				} else if (item.type === 'service') {
					uni.navigateTo({
						url: '/pages/order-detail-service/order-detail-service?id=' + item.id
					})
				}
			},
			changeCateIndex(data) {
				this.cateIndex = data
			},
			searchDetail(data) {
				this.params.searchKey = data.keyWord;
				this.params.pageNum = 1;
				this.orderData = [];
				// this.isShowBottom = false;
				this.onloadOrder();
			},
			navbarTapHandler(index) {
				this.currentIndex = index;
				this.params.appraiseState = '';
				console.log(index)
				//待付款
				if (index === 1) {
					this.params.state = 0;
					this.params.pageNum = 1;
					this.orderData = [];
					this.onloadOrder();
					//全部		
				} else if (index === 0) {
					this.params.state = '';
					this.params.pageNum = 1;
					this.orderData = [];
					this.onloadOrder();
				} else if (index === 2) {
					this.params.state = 1;
					this.params.pageNum = 1;
					this.orderData = [];
					this.onloadOrder();
				} else if (index === 3) {
					this.params.state = 2;
					this.params.pageNum = 1;
					this.params.appraiseState = 0;
					this.orderData = [];
					this.onloadOrder();
				}

			},
			//获取订单
			onloadOrder() {
				let params = this.params;
				uni.showLoading({
					title: '加载中'
				});
				this.$request.get({
					url: 'payOrder/selectAllByMine',
					data: params,
					force: true
				}).then(res => {
					console.log('订单', res)
					this.total = res.total;
					this.isLastPage = res.isLastPage;
					this.orderData = this.orderData.concat(res.list);
					uni.hideLoading()
				}, err => {
					console.log('获取订单 errxxxxxx');
				})
			},
			onReachBottom() {
				let len = this.orderData.length;
				let total = this.total;
				if (len >= total) {
					this.loadingText = "到底了";
					return false;
				} else {
					this.loadingText = "正在加载...";
					this.params.pageNum = this.params.pageNum + 1;
					this.onloadOrder();
				}
			}
		}
	}
</script>

<style lang="scss">
	.project-warp {
		background: #F5F6F9;

		.noData {}

		.topSearch {
			.searc-tab {
				background-color: #FFFFFF;
			}

			.search-input {
				background-color: #F4F4F4;
			}
		}

		.order-navbar {
			background-color: #FFFFFF;

			.ss-navbar {
				box-shadow: none;
				border-bottom: 2upx solid #F2F2F2;
			}
		}

		.order-warp {
			box-sizing: border-box;

			padding: 20upx;

			.order-item {
				width: 710upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 3upx 15upx 0upx rgba(0, 0, 0, 0.04);
				border-radius: 6upx;
				margin-bottom: 16upx;
				display: flex;
				flex-direction: column;

				.order-time {
					display: flex;
					height: 71upx;
					align-items: center;
					padding: 0 23upx;
					background-color: #F4F4F4;
					box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.04);

					view {
						flex: 1;
					}

					.order-data {
						text-align: left;
						font-size: 26upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(90, 90, 90, 1);
						line-height: 26upx;

						image {
							width: 25upx;
							height: 25upx;
							margin-right: 15upx;
							display: inline-block;
							vertical-align: middle;
							margin-bottom: 6upx;
						}
					}

					.order-sign {
						text-align: right;
						font-size: 26upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(42, 125, 250, 1);
						line-height: 26upx;
					}
				}

				.order-info {
					flex: 1;
					display: flex;
					padding: 0 20upx;
					background-color: #FFFFFF;

					.order-image {
						width: 239upx;
						height: 150upx;
						margin-right: 22upx;

						.order-active {
							width: 239upx;
							height: 150upx;
							border-radius: 6upx;
							margin-top: 43upx;
						}

						.order-person {
							width: 157upx;
							height: 157upx;
							box-sizing: border-box;
							border-radius: 50%;
							padding: 6upx;
							background-color: #FFFFFF;
							box-shadow: 0 2upx 8upx 1upx rgba(0, 0, 0, .08);
							margin: 51upx auto;

							image {
								width: 147upx;
								height: 147upx;
								border-radius: 50%;
							}
						}
					}

					.order-date {
						flex: 1;
						height: 316upx;
						padding: 30upx 0;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.order-title {
							font-size: 30upx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							// line-height: 42upx;
							// height: 84upx;
							margin-top: 8upx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1; //向显示多少行就给多大值
							-webkit-box-orient: vertical;
						}

						.order-num-price {
							color: #5A5A5A;
							font-size: 24upx;

							.order-num-sign {
								color: #333333;
								font-size: 24upx;
							}

							.order-num-num {
								color: #C13632;
								font-size: 26upx;
								font-weight: bold;
								margin-left: 5upx;
							}
						}

						.order-num-price-right {
							color: #5A5A5A;
							font-size: 24upx;
							text-align: right;
							margin-top: 40upx;

							.order-num-sign {
								color: #333333;
								font-size: 24upx;
							}

							.order-num-num {
								color: #C13632;
								font-size: 26upx;
								font-weight: bold;
								margin-left: 5upx;
							}
						}

						.order-num {
							display: flex;
							align-items: center;
							color: #828282;
							font-size: 24upx;
							margin-top: 12upx;

							.order-num-r {
								color: #333333;
								font-size: 26upx;
								flex: 1;
								display: flex;
								font-weight: bold;
								justify-content: flex-end;
							}
						}

						.order-type {
							color: #828282;
							font-size: 24upx;
							line-height: 24upx;
						}
					}

					.order-date-person {
						height: 257upx;
						padding: 51upx 0;
					}
				}

				.order-pay {
					text-align: right;
					overflow: hidden;
					height: 96upx;
					border-top: 1upx solid #E9E9E9;
					display: flex;
					align-items: center;
					padding: 0 20upx;
					justify-content: flex-end;
					background-color: #FFFFFF;

					.order-pay-button1 {
						display: inline-block;
						width: 162upx;
						height: 64upx;
						background: #2A7DFA;
						border-radius: 12upx;
						color: #FFFFFF;
						font-size: 26upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 64upx;
						text-align: center;
					}

					.order-pay-button2 {
						display: inline-block;
						width: 162upx;
						height: 64upx;
						background: rgba(255, 255, 255, 1);
						border-radius: 12upx;
						border: 1upx solid #CCCCCC;
						font-size: 26upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #4E4E4E;
						line-height: 64upx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
